33 add apollo client to the frontend #52
Merged
+288
−10
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Install @apollo/client with its required rxjs and graphql peers so the frontend can query the backend. Refs #33
Forward /project2/graphql to the backend during development, the same path Apache will proxy on the VM, so the frontend uses one URL everywhere and avoids CORS. Refs #33
Create a shared Apollo Client that sends queries to /project2/graphql, or VITE_GRAPHQL_URL when set, and wrap the app in ApolloProvider so any component can use useQuery. Refs #33
Add the first GraphQL query in frontend/src/graphql/ and a temporary BackendStatus footer that runs it on page load, showing whether the frontend can reach the backend. Should be removed once real queries exists. Refs #33
Test the checking, connected and unavailable stats with MockedProvider, so no running backend is needed. Refs #33
4 tasks
asgeija
requested changes
Oct 8, 2026
There was a problem hiding this comment.
Looks good, lint, build and tests pass for me. Two small things:
-
You removed the PORT=3002 note from AGENTS.md, but vite.config.ts now uses BACKEND_PORT. Can you add a note about that? Otherwise it just says "Backend: unavailable" if port 3001 is taken.
-
Add role="status" to the p in BackendStatus so screen readers pick up the change.
The bundle is a bit bigger now, but a separate issue for that is fine.
REstore the note on moving both servers to another port, since the frontends´s BACKEND_PORT must match the backend´s PORT. Add role="status" so screen readers announce the status change, with a test for it. Refs #33
Added the PORT/BACKEND_PORT note back to AGENTS.md and role="status" on the footer, plus a test that checks the role. |
Sign in
to join this conversation on GitHub.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add Apollo Client to the frontend
The frontend can now talk to the backend through Apollo Client.
@apollo/client,rxjsandgraphql@16added (same graphql version as the backend)graphql/client.ts: shared client, wrapped around the app withApolloProvider/project2/graphql. In dev, Vite proxies it to the backend; on the VM, Apache must do the same. No.envor CORS needed.VITE_GRAPHQL_URLoverrides the URL.graphql/queries.ts: first query (health)BackendStatusfooter showing connected / unavailable, with tests usingMockedProviderHow to test
npm install, thennpm run dev:backendandnpm run devCloses #33